<?php $this->Html->addCrumb('Trang chủ','/')?>
<div class="cartColumn">
<div class="checkoutStep2">
    <p class="checkoutSteps">
		<a href="/gio-hang">Giỏ hàng</a> 
		<span>Thông tin giao hàng</span>
		<a href="/orders/shipping">Phương thức vận chuyển</a>
		<a href="/orders/billing">Thanh toán</a>
	</p>
	<?php echo $this->Form->create('OrderDetail',array('type'=>'post','class'=>'form-style'))?>
	<table width="300" cellspacing="0" cellpadding="0" border="0" align="left" style="margin-right:10px;">
		<tbody>
			<tr>
				<td><?php echo $this->Form->input('name',array('label'=>'Tên người nhận','type'=>'text','required'=>true))?></td>
			</tr>
			<tr>
				<td><?php echo $this->Form->input('address',array('label'=>'Địa chỉ','type'=>'text','required'=>true))?></td>
			</tr>
			<tr>
				<td><?php echo $this->Form->input('city_id',array('label'=>'Thành phố','options'=>$cities,'required'=>true,'id'=>'scity'))?></td>
			</tr>
			<tr>
				<td><?php echo $this->Form->input('district_id',array('label'=>'Quận huyện','type'=>'select','required'=>true,'id'=>'sdistrict'))?></td>
			</tr>
			<tr>
				<td><?php echo $this->Form->input('area_id',array('label'=>'Phường xã','type'=>'select','required'=>true,'id'=>'sarea'))?></td>
			</tr>
			<tr>
				<td><?php echo $this->Form->input('tel',array('label'=>'Số điện thoại','type'=>'text','required'=>true))?></td>
			</tr>			
		</tbody>
	</table>
	<div class="cartBar">
		<a href='/gio-hang'><input type="image" tabindex="16" src="/img/button_checkout_prev.jpg"></a>
		<input type="image" tabindex="17" src="/img/button_checkout_next.jpg">
	</div>	
	<?php echo $this->Form->end()?>
</div>
<script language='javascript' type='text/javascript'>
$().ready(function(){
	loadDistrict();
	
	$('#scity').change(function(){
		loadDistrict();
	});
	$('#sdistrict').change(function(){
		loadArea();
	});
});

function loadDistrict(){
	var city_id = $('#scity').val();
	$.ajax({
		'url' : '<?php echo $this->Html->url(array('action'=>'loadDistrict'))?>'+'/'+city_id,
		'type' : 'get',		
		'dataType' : 'json',
		'success' : function(items){
			$('#sdistrict').empty();
			$.each(items, function (i, item) {
				$('#sdistrict').append($('<option>', { 
					value: i,
					text : item,
				}));
			});
			loadArea();
		},
	})
}

function loadArea(){
	var district_id = $('#sdistrict').val();	
	$.ajax({
		'url' : '<?php echo $this->Html->url(array('action'=>'loadArea'))?>'+'/'+district_id,
		'type' : 'get',		
		'dataType' : 'json',
		'success' : function(items){
			$('#sarea').empty();
			$.each(items, function (i, item) {
				$('#sarea').append($('<option>', { 
					value: i,
					text : item,
				}));
			});
		},
	});
}
</script>